<template>
	<view class="ProductListData flex">
		<template v-for="(item,index) in productData">
			<view class="content flexDeCo">
				<template v-if="(index + 1) % 2 === 0">
					<image :src="item.url" mode="" class="img mt15"></image>
				</template>
				<template v-else>
					<image :src="item.url" mode="" class="img"></image>
				</template>
				<view class="top flex_jcsb boxSize_bb">
					<view class="top_left">
						{{item.productName}}
					</view>
					<image src="/static/images/ProductListData/add.png" mode="" class="top_right" @click="pop(index)"></image>
				</view>
				<view class="bottom  boxSize_bb">
					{{item.description}}
				</view>
			</view>
		</template>
		<up-popup :show="showPop" mode="bottom" @close="close" @open="open" :round="8">
			<view class="pop boxSize_bb flexDeCo">
				<view class="item pop_one flex">
					<image src="/static/images/ProductListData/img1Replace.png" mode="" class="po_left"></image>
					<view class="po_right flexDeCo">
						<view class="por_top">酒店鹅绒枕芯</view>
						<view class="por_middle">
							￥{{ selectItem.price }}
						</view>
						<view class="por_bottom">
							￥{{ selectItem.originalPrice }}
						</view>
					</view>
				</view>
				<view v-show="selectItem.type">
					<view class="item pop_two flex">被芯尺寸</view>
					<view class="item pop_three">
						<text class="pt_one boxSize_bb">
							200X230 cm
						</text>
						<text class="pt_two boxSize_bb">
							220x240 cm
						</text>
					</view>
				</view>
				<view class="item pop_four">数量</view>
				<view class="item pop_five flex">
					<image src="/static/images/ProductListData/decline.png" mode="" class="pf_decline"
						@click="coutDecrease">
					</image>
					<text class="pf_cout">{{selectItem.count}}</text>
					<image src="/static/images/ProductListData/raise.png" mode="" class="pf_raise"
						@click="coutIncrease">
					</image>
				</view>
				<view class="item pop_six" @click="goToMyShopingCar">添加至购物车</view>
			</view>
		</up-popup>
		<shop-car />
	</view>
</template>

<script>
	import { showModal } from '../../utils/promise';
import ShopCar from '../ShopCar/ShopCar.vue';
	export default {
		name: "ProductList",
		data() {
			return {
				// productData: [{
				// 		url: "/static/images/ProductListData/img1Replace.png",
				// 		text1: "鹅绒枕芯",
				// 		text2: "最新活动与优惠"
				// 	},
				// 	{
				// 		url: "/static/images/ProductListData/img1Replace.png",
				// 		text1: "鹅绒枕芯",
				// 		text2: "最新活动与优惠"
				// 	},
				// 	{
				// 		url: "/static/images/ProductListData/img1Replace.png",
				// 		text1: "鹅绒枕芯",
				// 		text2: "最新活动与优惠"
				// 	},
				// 	{
				// 		url: "/static/images/ProductListData/img1Replace.png",
				// 		text1: "鹅绒枕芯",
				// 		text2: "最新活动与优惠"
				// 	},

				// ],
				showPop: false,
				// cout: 0,
				selectItem: {},
				active: 0
			};
		},
		props: [
			"productData"
		],
		components: {
			ShopCar,
		},
		methods: {
			pop(index) {
				console.log(this.productData[index].count)
				// console.log(item);
				this.selectItem = this.productData[index]
				this.active = index
				this.showPop = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			coutIncrease() {
				// console.log("11")
				this.selectItem.count++

			},
			coutDecrease() {
				// console.log("22")
				if (this.selectItem.count > 1) {
					this.selectItem.count--
				}
			},
			goToMyShopingCar() {
				// console.log(this.cout)
				uni.navigateTo({
					url: "/pages/ShoppingCartPage/ShoppingCartPage"
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.ProductListData {
		margin: 0 30rpx;
		flex-wrap: wrap;
		font-family: 'PingFang SC';
		letter-spacing: -0.82rpx;
		color: #222222;

		.content {
			justify-content: center;
			width: 336rpx;
			height: 474rpx;
			border-radius: 16rpx;
			padding-bottom: 30rpx;

			.mt15 {
				margin-left: 30rpx;
			}

			.img {
				width: 336rpx;
				height: 336rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				margin-top: 20rpx;
			}

			.top {
				padding: 0 20rpx;
				margin-top: 30rpx;

				.top_left {
					font-weight: 500;
					font-size: 28rpx;
				}

				.top_right {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.bottom {
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4C97;
				margin: 20rpx;

			}

		}

		.pop {
			width: 750rpx;
			height: 708rpx;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			background: #FFFFFF;
			padding: 30rpx;

			.pop_one {
				.po_left {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;

				}

				.po_right {
					margin-left: 20rpx;

					.por_top {
						font-weight: 500;
						font-size: 34rpx;
						letter-spacing: 0px;
						color: #000000;
					}

					.por_middle {
						font-weight: 500;
						font-size: 30rpx;
						letter-spacing: 0px;
						color: #FF4D00;
						margin-top: 20rpx;
					}

					.por_bottom {
						font-family: 'PingFang SC';
						font-weight: 400;
						font-size: 24rpx;
						letter-spacing: 0px;
						text-decoration: line-through;
						color: #00000059;
						margin-top: 20rpx;

					}
				}
			}

			.pop_two {
				font-weight: 400;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
				margin-top: 40rpx;
			}

			.pop_three {
				margin-top: 25rpx; //改动大小

				.pt_one {
					padding: 22rpx 44rpx;
					border-radius: 40rpx;
					background: #EEEEEE;
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
					text-align: center;

				}

				.pt_two {

					padding: 22rpx 44rpx;
					border-radius: 40rpx;
					border-width: 2rpx;
					font-weight: 400;
					font-size: 26rpx;
					letter-spacing: 0px;
					background: #EEF6FF;
					color: #0F4C97;
					margin-left: 20rpx;

				}
			}

			.pop_four {
				font-weight: 400;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
				margin-top: 30rpx;
			}

			.pop_five {
				margin-top: 20rpx;

				.pf_decline {
					width: 40rpx;
					height: 40rpx;
				}

				.pf_raise {
					width: 40rpx;
					height: 40rpx;
					margin-left: 40rpx;
				}

				.pf_cout {
					font-weight: 400;
					font-size: 28rpx;
					letter-spacing: 0px;
					color: #000000;
					margin-left: 40rpx;

				}
			}

			.pop_six {
				width: 670rpx;
				height: 88rpx;
				border-radius: 8rpx;
				background: #0F4C97;
				font-weight: 400;
				font-size: 34rpx;
				line-height: 88rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
				text-align: center;
				margin-top: 60rpx;

			}
		}
	}
</style>